<template>
  <van-nav-bar
    title="订单"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('');
      }
    "
  />
  <van-search v-model="valuech" placeholder="请输入搜索关键词" @click="souc"/>
  <template style="height: 100px;">
    <van-cell-group v-for="item in valdata">
      <van-cell :title="item.goods_name" value="内容" />
    </van-cell-group>
  </template>
  <van-tabs v-model:active="active" animated>
    <van-tab title="已支付">
      <div>
        <div>
            <img
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              alt=""
              style="width: 100px"
            />
          </div>
        <div>
          名称:创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）
        </div>
        <div>价钱:5999</div>
        <div>状态:已支付</div>
      </div>
    </van-tab>
    <van-tab title="待支付">
      <div style="float: left;">
        <div>
          <div>
            <img
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              alt=""
              style="width: 100px"
            />
          </div>
          名称：spike 经典武士大马士革直刀(微型) 户外野营直刀 收藏礼品刀
          饰品刀具spike 经典武士大马士革直刀(微型) 户外野营直刀 收藏礼品刀
          饰品刀具
        </div>
        <div>价钱：699</div>
        <div>状态： 待支付</div>
      </div>
    </van-tab>
    <van-tab title="全部">
      <div>
        <div>
            <img
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              alt=""
              style="width: 100px"
            />
          </div>
        <div>
          名称:创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）
        </div>
        <div>价钱:5999</div>
        <div>状态:已支付</div>
      </div>
      <div>
        <div>
            <img
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              alt=""
              style="width: 100px"
            />
          </div>
        <div>
          名称：spike 经典武士大马士革直刀(微型) 户外野营直刀 收藏礼品刀
          饰品刀具spike 经典武士大马士革直刀(微型) 户外野营直刀 收藏礼品刀
          饰品刀具
        </div>
        <div>价钱：699</div>
        <div>状态： 待支付</div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script setup>
let router=new useRouter()
import { ref, watch } from "vue";
import { coucApi } from "@/api/api";
let valch = ref("");
let valdata = ref([]);
import _ from "lodash";
import { useRouter } from "vue-router";
watch(
  valch,
  _.debounce((valch) => {
    coucApi(valch).then((res) => {
      console.log(valch);
      valdata.value = res.data.message.goods_id;
    });
  })
);
const souc=()=>
{
    router.push('/serach')
}
</script>

<style lang="scss" scoped>
</style>